<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Profile</title>
<style type="text/css">
            .inputError {
                border: 1px solid red !important;
                color: red;
            }
            .divError {
                color: red;
            }
</style>
</head>
<body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <%@include file="Head-Banner.jsp" %>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <%@include file="Left-Banner.jsp" %>
            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">                
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        	Profile Management
                    </h1>
                </section>
                <!-- Main content -->
                <section class="content">
            <div style="display: block">
            	<div class="bg-gray"
				style="background-color: #444444; float: left; width: 100px">
					<a><button type="submit" form="updateProfileForm" class="btn bg-olive btn-block">Accept</button></a>
				</div>
				<div class="footer bg-gray"
				style="background-color: #444444; float: left; width: 115px;padding-left: 15px;">
					 <a href="profile.jsp"><button type="button" class="btn bg-olive btn-block" style="">Back</button> </a>
				</div>	
			</div>
                    <div class="form-box" id="">
                        <form action="user" id="updateProfileForm" method="post">
                        <input type="hidden" name="action" value="editprofile">
                            <div class="body bg-gray">
                            	<div class="form-group">
                                    <label>Username:</label>
                                    <input style="text-align: center;" id="txtUsername" name="txtUsername" type="text" class="form-control" value="${sessionScope.account.userName}" readonly="true">
                                </div> 
                                <div class="form-group">
                                    <label>First Name:</label>
                                    <input style="text-align: center;" id="txtFirstName" name="txtFirstName" type="text" class="form-control" value="${sessionScope.account.firstName}">
                                </div>
                                <div class="form-group">
                                    <label>Last Name:</label>
                                    <input style="text-align: center;" id="txtLastName" name="txtLastName" type="text" class="form-control" value="${sessionScope.account.lastName}">
                                </div>   
                                <div class="form-group">
                                    <label>Email:</label>
                                    <input style="text-align: center;" id="txtEmail" name="txtEmail" type="email" class="form-control" value="${sessionScope.account.emailAddress}">
                                </div> 
                                <div class="form-group">
                                    <label>Cell Phone:</label>
                                    <input  style="text-align: center;" id="txtPhone" name="txtPhone" type="text" class="form-control" value="${sessionScope.account.cellPhone}">
                                </div> 
                            </div>
                            <h4 style="color: red">${messageUpdateInfo}</h4>
                        </form>
                    </div>
                    
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
    </body>
<script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery.validator.addMethod("emailValid", function(value) {
                var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
                if (filter.test(value) || value.toString().length == 0) {
                    return true;
                }
                else {
                    return false;
                }
            });
            
            jQuery("#updateProfileForm").validate({
                errorElement: "div",
                errorClass: "divError",
                rules: {
                	txtFirstName: {
                        required: true,
                        rangelength: [6, 18]
                    },
                    txtLastName: {
                        required: true,
                        rangelength: [6, 18]
                    },
                    txtEmail: {
                        required: true,
                        emailValid: true,
                    },
                    txtPhone: {
                        required: true,
                        rangelength: [9, 10]
                    }
                },
                messages: {
                	txtFirstName: {
                        required: "What's your first name?",
                        rangelength: "You should use your real first name so that your friends may recognize you"
                    },
                    txtLastName: {
                        required: "What's your last name?",
                        emailValid: "Invalid email! Please make sure your email is available"
                    },
                    txtEmail: {
                        required: "tell us your email so that we can reach you",
                        emailValid: "Enter your new password at least six numbers"
                    },
                    txtPhone: {
                        required: "your phone will be used to confirm or secure your account in case of intruders",
                        rangelength: "Error invalid number. Please re-send using a valid 9 or 10 digit mobile number"
                    }
                }
            });
        });
    </script>    
</html>